<template>
  <div class="page-mobile-notice__detail">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="title"
    ></white-header>
    <div class="notice-header">
      <div class="title">
        {{ type == "v2-quesiton-bank" ? article_obj.title : notice_obj.name }}
      </div>
      <div class="author">
        <span>{{
          formatDate(
            type == "v2-quesiton-bank"
              ? article_obj.createTime
              : notice_obj.startTime
          )
        }}</span>
        <span v-if="article_obj.userName">{{
          article_obj.userName || "未知"
        }}</span>
      </div>
    </div>
    <div class="notice-content ql-snow">
      <div class="ql-editor" v-html="
        type == 'v2-quesiton-bank'
          ? article_obj.content
          : notice_obj.announcement
      "></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getNoticeDetail, getReadNotice, updateReadNotice } from "~/api/index";
import { getExamInfoOne,getExamInfoById,saveTestInfoStatus } from "~/api/v2-question-bank/question-bank.js";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
export default {
  components: {
    WhiteHeader
  },
  data() {
    return {
      notice_obj: {
        announcement: "",
        createTime: null,
        endTime: null,
        isOpen: 1,
        isShow: null,
        name: "",
        startTime: null,
        type: 1
      },
      readList: [],
      /* 新版题库文章 */
      article_obj: {
        title: "",
        content: "",
        createTime: 0,
        userName: ""
      }
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_loading(state) {
        return state.is_loading;
      }
    }),
    isLogin(){
      return this.token && Object.keys(this.user_info).length > 0;
    },
    /* 文章Id */
    notice_id() {
      return this.$route.query.id;
    },
    /* 获取文章类型 v2-quesiton-bank 新版题库资讯 */
    type() {
      return this.$route.query.type;
    },
    title() {
      if (this.type == "v2-quesiton-bank") {
        return this.article_obj.title;
      } else {
        if (this.notice_obj.type == 1) {
          return "通知详情";
        } else {
          return "公告详情";
        }
      }
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    onClickLeft() {
      this.$router.back();
    },
    /* 获取普通通知公告 */
    async getReadNotice() {
      this.SET_IS_LOADING(true);
      let result = await getReadNotice(this.user_info.id);
      if (result && result.data && result.data.code == 200) {
        this.readList = JSON.parse(result.data.data.readNoticeIds);
        if(this.isLogin){
          this.setNoticeIsRead(parseInt(this.$route.query.id));
        }
      } else {
        this.$toast(this.$t("locale.mobile.notice.t5"));
        this.SET_IS_LOADING(false);
      }
    },
    /* 普通通知设置已读 */
    async setNoticeIsRead(id) {
      if (this.readList.indexOf(id) == -1) {
        this.readList.push(id);
        let params = {
          userId: this.user_info.id,
          readNoticeIds: JSON.stringify(this.readList)
        };
        let result = await updateReadNotice(params);
        if (result && result.data && result.data.code == 200) {
        } else {
          this.$toast(this.$t("locale.mobile.notice.t5"));
        }
      } else {
        return false;
      }
    },
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    async getData() {
      this.SET_IS_LOADING(true);
      let result = await getNoticeDetail(this.notice_id);
      if (result && result.data.code == 200) {
        this.notice_obj = result.data.data;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(this.$t("locale.mobile.notice.t2"));
      }
    },
    /* 获取新版题库资讯 */
    async getExamInfoOne() {
      this.SET_IS_LOADING(true);
      let params = {
        id:this.notice_id
      }
      if (this.token && Object.keys(this.user_info).length > 0) {
        params = {
          ...params,
          userId: this.user_info.id
        }
      }
      let result = await getExamInfoById(params);
      console.log("新版题库资讯:", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        this.article_obj = data;
        if (this.token && Object.keys(this.user_info).length > 0 && data.isRead != 1) {
          this.saveTestInfoStatus();
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 题库考试资讯更改状态 未读 为 已读 */
    async saveTestInfoStatus(){
      let params = {
        informationId:this.notice_id,
        userId: this.user_info.id
      }
      let result = await saveTestInfoStatus(params);
      if (result && result.data && result.data.code == 200) {
        
      }
    },
    initPage() {
      if (this.type == "v2-quesiton-bank") {
        this.getExamInfoOne();
      } else {
        this.getData();
        if (this.token && Object.keys(this.user_info).length > 0) {
            this.getReadNotice();
            return;
        }
      }
    }
  },
  activated() {
    this.initPage();
  },
  created() {
    this.initPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-notice__detail {
  
  width: 7.2rem;
  min-height: 100vh;
  background-color: #ffffff;
  font-size: 0.3rem;
  padding: 0.3rem 0.3rem 1rem;
  .notice-header {
    //   padding: .3rem;
    .title {
      font-size: 0.3rem;
      font-weight: bold;
      font-stretch: normal;

      letter-spacing: 0px;
      color: #313233;
    }
    .author {
      margin-top: 0.2rem;
      color: #babec2;
    }
  }
  .notice-content {
    margin-top: 0.2rem;
  }
}
</style>
<style lang="scss">
.page-mobile-notice__detail {
  @import "assets/css/richtext.scss";
}
</style>
